<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { MONTH_STAGING } from '/@/api/modules/workbench/workbench';
const state: {
  /**
   * 维修数量 已完成
   */
  repairQuantity?: number;
  /**
   * 巡检数量 已完成
   */
  planInspectionQuantity?: number;
  /**
   * 保养数量 已完成
   */
  maintenanceQuantity?: number;
  /**
   * 保洁数量 已完成
   */
  cleaningQuantity?: number;
  /**
   * 运送数量 已完成
   */
  transportQuantity?: number;
} = reactive({
  repairQuantity: 0,
  planInspectionQuantity: 0,
  maintenanceQuantity: 0,
  cleaningQuantity: 0,
  transportQuantity: 0,
});
function queryStaging() {
  MONTH_STAGING({}).then((res) => {
    state.repairQuantity = res.repairQuantity;
    state.planInspectionQuantity = res.planInspectionQuantity;
    state.maintenanceQuantity = res.maintenanceQuantity;
    state.cleaningQuantity = res.cleaningQuantity;
    state.transportQuantity = res.transportQuantity;
  });
}
onMounted(() => {
  queryStaging();
});
</script>
<template>
  <view class="my-logistics-manage">
    <view class="my-logistics-manage__title">本月工作情况</view>
    <view class="my-logistics-manage__content">
      <view class="my-logistics-manage__item">
        <view class="my-logistics-manage__item__title">{{ state.repairQuantity }}</view>
        <view>维修</view>
      </view>
      <view class="my-logistics-manage__item">
        <view class="my-logistics-manage__item__title">{{ state.planInspectionQuantity }}</view>
        <view>巡检</view>
      </view>
      <view class="my-logistics-manage__item">
        <view class="my-logistics-manage__item__title">{{ state.maintenanceQuantity }}</view>
        <view>保养</view>
      </view>
      <view class="my-logistics-manage__item">
        <view class="my-logistics-manage__item__title">{{ state.cleaningQuantity }}</view>
        <view>保洁</view>
      </view>
      <view class="my-logistics-manage__item">
        <view class="my-logistics-manage__item__title">{{ state.transportQuantity }}</view>
        <view>运送</view>
      </view>
    </view>
  </view>
</template>
<style lang="scss">
.my-logistics-manage {
  border-radius: 20px;
  margin-bottom: 20px;
  background-color: #f6f7f9;
  padding: 24px;
  &__title {
    font-size: 24px;
    color: #333;
    font-weight: bold;
    margin-bottom: 20px;
  }
  &__content {
    display: flex;
    text-align: center;
  }
  &__item {
    flex: 1;
    font-size: 24px;
    color: #666;

    &__title {
      font-size: 36px;
      color: #333;
      margin-bottom: 10px;
    }
  }
}
</style>
